<template>
  <div class="background">
    <v-overlay class="v-overlay">
      <v-dialog
          class="rounded-xl"
          v-model="showMainDialog"
          width="75vw"
          min-width="960"
          max-width="1200"
          persistent
          hide-overlay>
        <div class="main-container">
          <navigation-drawer
              ref="navigationDrawer"
              class="navigation-drawer"
              minWidth="80px"
              maxWidth="200px"
              :list="navigationList"
              @select="onNavigationSelect"/>
          <div class="content-container">
            <div class="top-bar-container">
              <div class="panel-title-container">
                <div class="title-text">
                  {{ navigationList[currentSelectedNavigation].title }}
                </div>
              </div>
              <div class="network-status-container">
                <v-icon size="12" color="#999">fas fa-wifi</v-icon>
                <div>网络在线</div>
              </div>
              <div class="user-info-container">
                <v-menu
                    rounded="lg"
                    offset-y
                    right
                    transition="slide-y-transition"
                    bottom>
                  <template v-slot:activator="{ attrs, on }">
                    <v-avatar>
                      <img
                          :src="myInfo.avatar"
                          :alt="myInfo.nickname">
                    </v-avatar>
                    <v-btn
                        depressed text plain
                        v-bind="attrs"
                        v-on="on">
                      {{ myInfo.nickname }}
                      <v-icon size="6">
                        fas fa-chevron-down
                      </v-icon>
                    </v-btn>
                  </template>
                  <v-list>
                    <v-list-item
                        v-for="userMenuItem in userMenu"
                        :key="userMenuItem"
                        link>
                      <v-list-item-title v-text="userMenuItem"></v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
              </div>
            </div>
            <messagePanel
                ref="messagePanel"
                v-show="currentSelectedNavigation === 0"
                @friendList="setFriendList"
                @groupList="setGroupList"/>
            <friendsPanel
                ref="friendsPanel"
                v-show="currentSelectedNavigation === 1"
                @goToFriendChat="handleOpenFriendChat"/>
            <settingPanel
                v-show="currentSelectedNavigation === 3"
                @colorChange="handleColorChange"/>
            <messageCenter
                v-show="currentSelectedNavigation === 2"/>
          </div>
        </div>
      </v-dialog>
    </v-overlay>
  </div>
</template>

<script>
import navigationDrawer from "@/components/chat/navigationDrawer/navigationDrawer";
import messagePanel from "@/components/chat/messagePanel/messagePanel";
import friendsPanel from "@/components/chat/freindsPanel/friendsPanel";
import settingPanel from "@/components/chat/settingPanel/settingPanel";
import messageCenter from "@/components/chat/messageCenter/messageCenter";

export default {
  name: "Main",
  components: {
    navigationDrawer, messagePanel, friendsPanel, settingPanel, messageCenter
  },
  data() {
    return {
      myInfo: {},
      showMainDialog: true,
      navigationList: [
        {id: 0, title: '最近消息', icon: 'fas fa-comment'},
        {id: 1, title: '我的好友', icon: 'fas fa-user-friends'},
        {id: 3, title: '系统消息', icon: 'mdi-message-text-clock'},
        {id: 4, title: '设置中心', icon: 'fas fa-cog'},
      ],
      currentSelectedNavigation: 0,
      userMenu: ['修改个人资料', '修改密码', '创建群聊'],
      customerColor: '',
    }
  },
  methods: {
    onNavigationSelect(index) {
      this.currentSelectedNavigation = index;
      console.log(index)
    },
    handleColorChange(color) {
      this.customerColor = color;
    },
    setFriendList(friendList) {
      this.$refs.friendsPanel.friendList = friendList;
    },
    setGroupList(groupList) {
      this.$refs.friendsPanel.groupList = groupList;
    },
    handleOpenFriendChat(friendId) {
      this.$refs.messagePanel.openChat(friendId);
      this.$nextTick(() => {
        this.$refs.navigationDrawer.currentSelected = this.currentSelectedNavigation = 0;
      });
    },
  },
  watch: {
    customerColor(nval) {
      if (nval !== '') {
        // this.$refs.navigationDrawer.updateColor();
        Object.keys(this.$refs).forEach(item => {
          this.$refs[item].updateColor();
        });
      }
    }
  },
  mounted() {
    this.myInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.customerColor = document.getElementsByTagName('body')[0].style.getPropertyValue('--custom-color') ?? '#4746a3';
  },
  sockets: {
    // 链接成功
    connect(data) {
      console.log(data)
    },
    // 接收消息
    toClient(data) {
      console.log("监听的消息:" + data)
    },
    // 断开链接回调
    disconnect() {
      console.log('disconnect：', '已经断开 socket 链接')
    },
    // 重新连接
    reconnect() {
      this.$socket.emit('connect')
    },
    receiveMessage(news) {
      console.log(news)
      this.$refs.messagePanel.receiveMessage(news);
    }
  },
}
</script>

<style lang="scss" scoped>
@import 'Main';
</style>